<!--交易列表-->
<template>
  <div class="currency-list">
    <van-list>
      <van-cell>
        <div class="flex items-center w-full text-grey font-26">
        <div class="left flex items-center">
          <div class="flex  items-center">
            <span>{{ $t('名称') }}  </span>
            <div class="filter-box ml-10 mr-20" >
              <div class="w-14 h-12" :class="[sortVal == 1 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(1)"></div>
              <div class="w-14 h-12" :class="[sortVal == 2 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(2)">
              </div>
            </div>
          </div>
          <div class="flex  items-center" v-if="dealNum">
            <span>/   {{ $t('成交额  ') }}</span>
            <div class="filter-box ml-10" >
              <div class="w-14 h-12" :class="[sortVal == 3 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(3)"></div>
              <div class="w-14 h-12" :class="[sortVal == 4 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(4)">
              </div>
            </div>
          </div>

        </div>
        <div class="mid text-right flex justify-end items-center">
          {{ $t('最新价') }}
          <div class="filter-box ml-10" >
            <div class="w-14 h-12" :class="[sortVal == 3 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(3)">
            </div>
            <div class="w-14 h-12" :class="[sortVal == 4 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(4)">
            </div>
          </div>
        </div>
        <div class="right text-right flex justify-end items-center">
          {{$t('今日涨跌') }}
          <div class="filter-box ml-10" >
            <div class="w-14 h-12 " :class="[sortVal == 5 ? 'icon_top1_active' : 'icon_top1']" @click="listSort(5)">
            </div>
            <div class="w-14 h-12" :class="[sortVal == 6 ? 'icon_top2_active' : 'icon_top2']" @click="listSort(6)">
            </div>
          </div>
          <!--                  <img src="./icon-sort.png" alt="icon" class="w-13 h-22 ml-5"/>-->
        </div>
      </div>
    </van-cell>
<!--    <transition-group :name="type" tag="div">-->
      <div >
        <van-cell v-for="item in list" :key="item.id" >
          <ul class="flex justify-between w-full items-center py-20">
            <li class="flex  left">
              <p class="flex flex-col">
                  <span class="flex font-32 flex h-30 items-center ">
                    <span class="textColor font-30">{{$t(item.currency1)}}</span>
                    <span class="font-24 text-grey" style="position: relative; top: 1px" v-if="item.currency2">
                      /{{ $t(item.currency2) }}</span>
                   <img :src="require(`@/assets/image/market/${item.type}.png`)" alt="" class="ml-10" v-if="item.type">
<!--                     <img src="../../assets/image/market/type1.png" alt="" class="ml-10">-->
                  </span>
                <span class="font-24 text-grey h-30">{{ item.transactionCount}}</span>
              </p>
<!--              <div class="type">-->
<!--&lt;!&ndash;                <img :src="`require('@/assets/image/${item.type}.png')"`" alt="">&ndash;&gt;-->
<!--               -->
<!--              </div>-->
            </li>
            <li class="flex flex-col items-end mid">
              <p class="textColor font-32 h-30">{{item.newPrice1}}</p>
              <p class="font-24 text-grey h-30 ">{{item.newPrice2}}</p>
            </li>
            <li class="right flex items-center justify-center">
              <p class="w-153 font-31 h-67 bg-green text-white border-0  flex items-center justify-center rounded-xl text-center btn" v-if="item.change_ratio > 0">
                +{{ item.change_ratio }}%</p>
              <p class="w-153 font-31 h-67 bg-red text-white border-0  flex items-center justify-center rounded-lg text-center btn" v-else>
                {{ item.change_ratio }}%</p>
            </li>
          </ul>
        </van-cell>
      </div>
<!--      <div v-else :key="active">-->
<!--        <van-cell v-for="item in showList" :key="item.id">-->
<!--          <ul class="flex justify-between w-full items-center" @click="onItemClick(item)">-->
<!--            <li class="flex items-center left">-->
<!--              <img :src="`${HOST_URL}/symbol/${item.symbol}.png`" alt="logo" class="w-72 h-72 rounded-full mr-16" />-->
<!--              <p class="flex flex-col">-->
<!--                  <span class="flex items-end font-32 flex items-center">-->
<!--                    <span class="textColor font-600 font-30">{{ item.symbol && item.symbol.toUpperCase() || '&#45;&#45;' }}</span>-->
<!--                    <span class="font-24 text-grey" style="position: relative; top: 1px">-->
<!--                      {{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '&#45;&#45;' }}</span>-->
<!--                  </span>-->
<!--                <span class="font-24 text-grey mt-10">{{ $t('成交量') + ' ' + (item.amount * 1).toFixed(2) }}</span>-->
<!--              </p>-->
<!--            </li>-->
<!--            <li class="flex flex-col items-end mid">-->
<!--              <p class="textColor font-32 font-600">{{ item.close }}</p>-->
<!--              <p class="font-24 text-grey mt-10">{{ currency.currency_symbol }}{{ item.close && (item.close *-->
<!--                  currency.rate).toFixed(item.close.toString().split('.')[1] ? item.close.toString().split('.')[1].length-->
<!--                  :-->
<!--                  2) }}</p>-->
<!--            </li>-->
<!--            <li class="right flex items-center justify-end text-right">-->
<!--              <div v-if="active == 3" class="textColor w-182 font-700 font-24">-->
<!--                {{ (item.volume * 1).toFixed(2) }}-->
<!--              </div>-->
<!--              <template v-else>-->
<!--                <p class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn" v-if="item.change_ratio > 0">-->
<!--                  +{{ item.change_ratio }}%</p>-->
<!--                <p class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn" v-else>-->
<!--                  {{ item.change_ratio }}%</p>-->
<!--              </template>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </van-cell>-->
<!--      </div>-->
<!--    </transition-group>-->
  </van-list>
  </div>
</template>
<script>
export default {
  name: "currency-list",
  data() {
    return {

      sortVal: 0,
      active: 0,
      type: 'right',
      timeout: null,
      inputTimeout: null,
      keywords: ''
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    dealNum: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    listSort(val) {
      this.sortVal = val
    },
  }
}
</script>

<style scoped lang="scss">
.left {
  width: 382px
}

.mid {
  width: 185px;
   p{
     height: 2.5rem;
   }
}

.right {
  width: 182px;
  margin-left: 38px;
}
.filter-box {
  .icon_top1 {
    background: url('@/assets/image/icon_top1.png') no-repeat center;
    background-size: 100% 100%;
  }

  .icon_top2 {
    background: url('@/assets/image/icon_top2.png') no-repeat center;
    background-size: 100% 100%;
    //margin-top: 5px;
  }

  .icon_top1_active {
    background: url('@/assets/image/icon_top3.png') no-repeat center;
    background-size: 100% 100%;
  }

  .icon_top2_active {
    background: url('@/assets/image/icon_top4.png') no-repeat center;
    background-size: 100% 100%;
  }
}
li {
   span {

   }
}
</style>
